.artalk-comment-wrap {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid @color-border;

  &.artalk-flash-once {
    animation: artalkFlashOnce 1s ease-in-out 0s;

    @keyframes artalkFlashOnce {
      from {
        background: rgba(0, 131, 255, 0.2);
      }
      to {
        background: transparent;
      }
    }
  }

  &:last-child {
    border-bottom-color: transparent;
  }

  & > .artalk-comment {
    display: flex;
    padding: 12px 10px;

    & > .artalk-avatar {
      display: block;
      flex: none;
      margin-right: 12px;
      padding: 2px 0;

      img {
        width: 48px;
        height: 48px;
        border-radius: 3px;
      }
    }

    & > .artalk-comment-main {
      display: block;
      flex: auto;

      & > .artalk-header {
        line-height: 1;
        font-size: 12px;
        margin-bottom: 3px;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: end;

        .badge() {
          background: @color-bg-grey;
          padding: 0 5px;
          border-radius: 3px;
        }

        & > span {
          display: flex;
          margin-bottom: 2px;
          color: @color-meta;

          &:not(:last-child) {
            margin-right: 5px;
          }

          &.artalk-nick {
            font-size: 13px;

            & > a {
              color: @color-main;
              text-decoration: none;
            }
          }

          &.artalk-badge {
            .badge();
            background: #FF6C00;
            color: #FFF;
          }

          &.artalk-ua {
            .badge();
          }
        }
      }

      & > .artalk-body {
        display: block;
        overflow: hidden;
        position: relative;

        img {
          max-width: 100%;
        }

        & > .artalk-content {
          &.artalk-type-collapsed {
            border: 3px solid @color-bg-grey;
            border-bottom: 0;
            padding: 5px 10px;
            border-radius: @block-radius @block-radius 0 0;
            margin-bottom: -5px;
          }

          &.artalk-hide {
            display: none;
          }

          & > *:first-child {
            margin-top: 0;
          }

          & > *:last-child {
            margin-bottom: 0;
          }
        }

        & > .artalk-collapsed {
          margin: 3px 0;
          font-size: 13px;
          padding: 10px 18px;
          display: block;
          background: @color-bg-grey;
          border-radius: @block-radius;

          & > .artalk-text {
            color: @color-meta;
          }

          & > .artalk-show-btn {
            color: @color-main;
            cursor: pointer;
            user-select: none;
            margin-left: 3px;
            &:hover {
              color: @color-main;
            }
          }
        }

        &.artalk-read-more-mask:after {
          pointer-events: none;
          position: absolute;
          z-index: 1;
          display: block;
          overflow: hidden;
          width: 100%;
          content: " ";
          bottom: 0;
          height: 41px;
          background: linear-gradient(180deg, hsla(0,0%,100%,0), hsla(0,0%,100%,1));
        }
      }

      & > .artalk-footer {
        margin-top: 4px;

        .artalk-comment-actions {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 8px;

          & > span {
            display: inline-flex;
            color: @color-meta;
            font-size: 13px;
            line-height: 15px;
            cursor: pointer;
            user-select: none;

            &.artalk-hide {
              display: none;
            }

            &.artalk-error, &.artalk-error:hover {
              color: @color-red;
            }

            &:not(:first-child):not(.artalk-hide) {
              margin-left: 8px;
              padding-left: 8px;
              border-left: 1px solid @color-border;
            }

            &:hover {
              color: @color-deep;
            }
          }
        }
      }
    }
  }

  .comment-small-size() {
    border-bottom-color: transparent;
    &:not(:last-child) {
      margin-bottom: 5px;
    }

    & > .artalk-comment {
      padding-top: 4px;
      padding-bottom: 4px;

      & > .artalk-avatar img {
        width: 36px;
        height: 36px;
      }
    }
  }

  .artalk-comment-children {
    .artalk-comment-wrap {
      margin-top: 10px;
      border-left: 1px dashed hsla(0,0%,93%,.5);

      .comment-small-size()
    }
  }
}
